import React, { useState } from "react";
import { ConfigProvider, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import Playground from '@/components/playground'
import BridgeIcon from '@/icons/BridgeIcon';
import PlaygroundIcon2 from '@/icons/PlaygroundIcon2';
import './App.less'
import './popup.less'
import './index.less'

export default function ChatbotPanel({ onUnExpanded }: any) {


    const [popupTab, setPopupTab] = useState<string>('')
    const [currentMode, setCurrentMode] = useState<'playground' | 'bridge'>(
        'playground',
    );

    const menuItems = [
        {
            key: 'playground',
            icon: <PlaygroundIcon2 />,
            label: 'Playground',
            onClick: () => {
                setCurrentMode('playground');
                setPopupTab('playground');
            },
        },
        {
            key: 'bridge',
            icon: <BridgeIcon />,
            label: 'Bridge Mode',
            onClick: () => {
                setCurrentMode('bridge');
                setPopupTab('bridge');
            },
        },
    ];

    return <ConfigProvider>


        <div className="popup-wrapper">
            <div className="popup-panel-header">
                <h4 className="popup-panel-title">智友机器人</h4>
                <Button
                    title="收起"
                    type='text'
                    size="small"
                    onClick={onUnExpanded}
                    icon={<RightOutlined />}
                    className='right-sidebar-toggle'
                />
            </div>

            <div className="popup-content">

                <div className="playground-component">
                    <Playground
                        getAgent={(forceSameTabNavigation?: boolean) => {

                        }}
                        showContextPreview={false}
                    />
                </div>
            </div>

        </div>

    </ConfigProvider>
}